@frui.ts/helpers

@frui.ts/helpers

Helper functions for various use cases.

@bound

A function decorator that binds context of the function to the parent class. This is useful for direct use of the function as event handler <Xxx onClick={vm.decoratedFunction} /> so that new anonymous functions are not allocated for each render (compare to <Xxx onClick={() => vm.decoratedFunction()} />).

Usage

// in view model
class MyViewModel {
  @bound someAction() {
    // you can safely use 'this' here
  }
}

// in view
<button onClick={vm.someAction} />

createMap

Helper function for easily creating Maps.

Usage

const items = [
  { id: 1, name: "One" },
  { id: 2, name: "Two" },
  { id: 3, name: "Three" },
];

// map of items by key
const itemsById = createMap(items, x => x.id); // Map<number, { id, name }>

// map of values by key
const namesById = createMap(items, x => x.id, x => x.name); // Map<number, string>

nameof

Syntactic sugar for creating strings that are also a key of a type.

Usage

this.pagingFilter.sortColumn = nameof<User>("login"); // the same as ="login", but checked on compile time that the class 'User' actually has a 'login' field

Changelog

0.15.0

• New package @frui.ts/dataviews with higher-order components for displaying data. Check the readme.
• Added useBinding, getValue, and setValue helper functions to @frui.ts/views. You can use them when implementing functional binding components.
• React and Mobx made peer dependencies
• Router requires root view model on start() instead of the constructor
• Router accepts a navigation adapter on start(), which enables proper cooperation of the two components
• Route name can be string, symbol, or class
• UrlNavigationAdapter requires root view model on start() instead of the constructor
• You can provide custom JSON serializer to FetchApiConnector
• initialize(): Promise<any> | void added to IActivatable (and therefore to IScreen as well)
• ConductorSingleChild requires findNavigationChild to be implemented. You can return undefined, which was the original default, if you don't need navigation to child screens.
• When activating a child of a conductor, it gets at least initialized when the parent is not active
• AutomaticDirtyWatcher can be configured to exclude specified properties
• Check in @frui.ts/bootstrap supports indeterminate state. Enable it by setting the threeState prop. The state id displayed when the bound value is null.
• Check in @frui.ts/bootstrap supports value property so that it can set custom values to the bound property (not only boolean).